<template>
	<view class="real-container">
		<view class="setUp-root">
			<view class="list">
				<view class="info" @click="upImg" style="padding: 4rpx 20rpx;">
					<view class="txt">头像</view>
					<view class="head-img">
						<image :src="avatar" mode=""></image>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#fff" class="arrow"></u-icon>
					</view>
				</view>
				<view class="info" @click="GOnickname">
					<view class="txt">昵称</view>
					<view class="" style="color:white;">{{ nickname }}</view>
					<view class="right">
						<u-icon name="arrow-right" color="#fff" class="arrow"></u-icon>
					</view>
				</view>
			</view>
			<u-popup v-model="show" mode="center" height="320" width="710" border-radius="25">
				<view class="popup">
					<view class="success">修改昵称</view>
					<view class="sucorder">
						<input type="text" placeholder="请输入昵称" :maxlength="10" v-model="nickname" />
					</view>
					<view class="but allbtn" @click="baocun">保存</view>
				</view>
			</u-popup>
		</view>
		<!-- 导航栏 -->
		<view class="content">
			<view class="content-item">
				<view class="item-left">
					<text>用户ID</text>
				</view>
				<view class="">
					<text style="color:#fff;">{{ arrList.userInfo.id }}</text>
					<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
				</view>
			</view>
			<view class="content-item">
				<view class="item-left">
					<text>绑定手机号</text>
				</view>
				<view class="">
					<text style="color:#fff;">{{ arrList.userInfo.mobile }}</text>
					<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
				</view>
			</view>
			<view class="content-item">
				<view class="item-left">
					<text>账户注销</text>
				</view>
				<view class="" @click="gourl('/userPage/user/zhuxiao')">
					<text style="color:#fff;">注销后无法恢复，请谨慎操作</text>
					<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			avatar: '',
			nickname: '',
			arrList: {
				userInfo: {}
			}
		}
	},
	onShow() {
		this.arrData()
		this.userInfo()
	},
	methods: {
		arrData() {
			this.$Request.get(this.$api.user.index).then(res => {
				this.arrList = res.data;
			});
		},
		gourl(url) {
			uni.navigateTo({
				url: url
			})
		},
		baocun() {
			let data = {
				type: 'nickname',
				val: this.nickname
			}
			this.$Request.post(this.$api.user.editInfo, data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.show = false;
			});
		},
		userInfo() {
			this.$Request.get(this.$api.user.index).then(res => {
				this.avatar = res.data.userInfo.avatar;
				this.nickname = res.data.userInfo.nickname;
			});
		},
		upImg() {
			let that = this
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'], //从相册选择
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: that.$configs.APIHOST + that.$api.user.file, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							"Authorization": 'Bearer ' + uni.getStorageSync('USERINFO')
						},
						success: (uploadFileRes) => {

							that.avatar = JSON.parse(uploadFileRes.data).data.url
							let data = {
								type: 'avatar',
								val: that.avatar
							}
							that.$Request.post(that.$api.user.editInfo, data).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							});
						}
					});
				}
			});
		},
		GOnickname() {
			this.show = true;
		}
	}
}
</script>

<style lang="scss" scoped>
.popup {
	padding-top: 40rpx;

	.success {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		color: #333;
	}

	.sucorder {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 30rpx;

		input {
			background-color: #f3f3f3;
			padding: 10rpx 20rpx;
			border-radius: 4rpx;
		}
	}

	.title {
		padding-top: 40rpx;
		width: 100%;
		font-size: 40rpx;
		color: #FF6505;
		display: flex;
		justify-content: center;
		align-items: center;

		text:nth-of-type(1) {
			font-size: 30rpx;
			color: #333333;
		}

		text:nth-of-type(2) {
			font-size: 48rpx;
			color: #FF1403;
		}

		text:nth-of-type(3) {
			font-size: 30rpx;
			color: #fff;
		}


		text:nth-of-type(4) {
			font-size: 48rpx;
			color: #FF1403;
		}
	}

	.sec {
		width: 100%;
		font-size: 32rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 60rpx;
		font-weight: bold;
		padding-top: 18rpx;
	}

	.but {
		margin: 50rpx auto;
		width: 200rpx;
		background-color: #485cbc;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 30rpx;

	}
}

.setUp-root {
	width: 96%;
	margin: auto;
	position: relative;
	padding-top: 10rpx;
	box-sizing: border-box;

	.list {
		background-color: #262626;


		.info {
			height: 100rpx;
			display: flex;
			padding: 25rpx 20rpx;
			align-items: center;
			// border-bottom: solid 1upx #eee;
			background: rgba(255, 231, 192, 0.1);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #FED187;
			margin-bottom: 10rpx;

			.txt {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				line-height: 40rpx;
				flex: 1;
			}

			.head-img {
				width: 82rpx;
				height: 82rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 41rpx;
				}
			}

			.img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				display: flex;
				align-items: center;
				color: #fff;
				margin-left: 15rpx;

				.tis {
					font-size: 26upx;
					margin-right: 5upx;
					max-height: 120upx;

					image {
						width: 120upx;
						height: 120upx;
						margin: 10upx 0;
					}
				}

				.icon {
					width: 40upx;
					color: #fff;
				}
			}
		}
	}
}







.real-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	background: #262626;
}


.business-back-imgbox {
	flex-grow: 1;
}

.business-back {
	width: 48rpx;
	height: 48rpx;
}

.business-title {
	font-size: 36rpx;
	color: white;
	font-weight: 600;
	flex-grow: 1.1;
}

.content {
	width: 100%;
	background: #262626;
}

.content .content-item {
	width: 96%;
	margin: auto;
	min-height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	border: 1rpx solid #FED187;
	margin-bottom: 10rpx;
}

.content .content-item .item-left {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.content .content-item .item-left text {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fff;
}

.content .content-item .item-text {
	font-size: 28rpx;
	color: #fff;
	opacity: 1;
	margin-left: 20rpx;
}
</style>
